<!--  -->
<template>
  <div class="">
    <el-form
      ref="formInline"
      :inline="true"
      size="small"
      :model="flagCusMolde"
      class="demo-form-inline"
    >
      <el-form-item label="关键字搜索" prop="kw">
        <el-input v-model="flagCusMolde.kw" placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item label="数据来源" prop="clientId">
        <el-select v-model="flagCusMolde.clientId" placeholder="请选择状态">
          <el-option
            v-for="(item, index) in mesFromArr"
            :key="index"
            :label="item.tName"
            :value="item.tId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="未跟进时间" prop="noFollowDay">
        <el-select v-model="flagCusMolde.noFollowDay" placeholder="请选择跟进时间">
          <el-option
          v-for="(item,index) in noFollowDayArr"
          :key="index"
          :label="item.name"
          :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否重复" prop="isRepeat">
        <el-select v-model="flagCusMolde.isRepeat" placeholder="请选择是否重复">
          <el-option
          v-for="(item,index) in isRepeatArr"
          :key="index"
          :label="item.name"
          :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="flagCusMolde.value_flag"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="getFlagListFun"
          class="queryButton"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          class="resetButton"
          @click="resetQuery('formInline')"
          icon="el-icon-refresh"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-form>
      <el-button
        type="primary"
        plain
        class="queryButton"
        @click="addmyCusBtn"
        v-permissions="'customers:add'"
        icon="el-icon-plus"
        style="margin-left: 5px; margin-bottom: 5px;"
        >新增</el-button
      >
      <el-upload
        name="file"
        class="upload-demo"
        action="string"
        :http-request="uploadExcel"
        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.csv"
        :show-file-list="false"
        :auto-upload="true"
        :on-error="fileUploadError"
        :on-success="fileUploadSuccess"
      >
        <el-button
          class="queryButton"
          icon="el-icon-upload2"
          v-permissions="'customers:uploadExcel'"
          style="margin-left: 5px; margin-bottom: 5px;"
          >上传客户列表</el-button
        >
      </el-upload>
      <el-button
        type="success"
        @click="downLoadCus"
        icon="el-icon-download"
        v-permissions="'customers:downloadCus'"
        class="queryButton"
        plain
        style="margin-left: 5px; margin-bottom: 5px;"
        >下载客户</el-button
      >
      <el-button
        type="danger"
        @click="downLoadTem"
        icon="el-icon-download"
        class="queryButton"
        plain
        style="margin-left: 5px; margin-bottom: 5px;"
        >下载excel模板</el-button
      >
      <el-button
        type="warning"
        @click="deleteBtnAll"
        icon="el-icon-delete"
        class="queryButton"
        v-permissions="'customers:batchDelete'"
        plain
        style="margin-left: 5px; margin-bottom: 5px;"
        >批量删除客户</el-button>
      <el-button
        type="primary"
        @click="seeImportUserList"
        icon="el-icon-view"
        class="queryButton"
        plain
        style="margin-left: 5px; margin-bottom: 5px;"
        >查看导入客户记录</el-button>
    </el-form>
    <!-- 新增我的客户弹框 -->
    <el-dialog
      title="新增我的客户"
      :visible.sync="isShowaddMyCus"
      @close="resetQuery('roleForm')"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="25%"
    >
      <el-form
        ref="roleForm"
        size="small"
        :model="myCusFromAdd"
        :rules="addMyCusRule"
        label-width="80px"
      >
        <el-form-item label="客户名称" prop="cusName">
          <el-input v-model="myCusFromAdd.cusName"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号" prop="phone">
          <el-input v-model="myCusFromAdd.phone"></el-input>
        </el-form-item>
        <el-form-item label="借款额度" prop="quota">
          <el-input v-model="myCusFromAdd.quota"></el-input>
        </el-form-item>
        <el-form-item label="客户星级" prop="level">
          <el-select v-model="myCusFromAdd.level" placeholder="请选择星级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户状态" prop="status">
          <el-select v-model="myCusFromAdd.status" placeholder="请选择">
            <el-option
              v-for="(item, index) in flagStatusArr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="myCusFromAdd.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center">
        <el-button type="primary" plain @click="submitMycus" class="queryButton"
          >保存</el-button
        >
        <el-button plain class="resetButton" @click="resetQuery('roleForm')"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 详情我的客户弹框 -->
    <el-drawer
      title="客户详情"
      :visible.sync="showFlagDetailDia"
      :direction="direction"
      size="85%"
      @click="closeDia"
    >
      <!-- <el-form
        ref="basicForm"
        :inline="false"
        size="small"
        class="demo-form-inline"
        :model="flagDetailObj"
        :rules="flagRule"
        label-position="left"
        label-width="220px"
      > -->
      <div class="filter-container">
        <div class="innerBigBox">
          <div class="innerSty">
            <div class="outBox">
              <div class="templeateBox">
                <div class="innerPhone">
                  <div>姓名：</div>
                  
                  <el-tooltip class="item" effect="dark" :content="flagDetailObj.name" placement="top-start">
                    <span>{{ flagDetailObj.name }}</span>
                  </el-tooltip>
                  
                </div>
                <div class="innerPhone">
                  <div>电话：</div>
                  <el-tooltip class="item" effect="dark" :content="flagDetailObj.phone" placement="top-start">
                    <span>{{ flagDetailObj.phone }}</span>
                  </el-tooltip>
                  <!-- <i class="el-icon-phone-outline"></i> -->
                </div>
                <div class="innerPhone_selet">
                  <div style="font-weight: 600;">状态：</div>
                  <el-select
                    v-model="flagDetailObj.status"
                    placeholder="请选择客户状态"
                  >
                    <el-option
                      v-for="(item, index) in flagStatusArr"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div class="templeateBox">
                <div class="innerName">
                  <span style="font-weight: 600">跟进时间：</span
                  >{{
                    flagDetailObj.newTime === null
                      ? "-"
                      : timestampToDate(flagDetailObj.newTime)
                  }}
                </div>
              </div>
            </div>
            <div class="innerBottonGroups">
              <div @click="goLastPage">上一条</div>
              <div @click="goNextPage">下一条</div>
            </div>
          </div>
          <div class="userRemark">
            <div class="remarkTitle">
              <div style="font-weight: 600">客户备注</div>
              <div @click="commitUserfo">保存</div>
            </div>
            <el-input
              type="textarea"
              v-model="flagDetailObj.remarks"
              clearable
              placeholder="车 + 房 + 五险一金"
            ></el-input>
          </div>
          <div class="userRemark">
            <div class="remarkTitle">
              <div style="font-weight: 600">跟进记录</div>
              <div @click="commitUserfo">保存</div>
            </div>
            <el-input
              type="textarea"
              @input="forceUpdate"
              v-model="flagDetailObj.followUpRecord"
              clearable
            ></el-input>
            <div class="beforeWords">
              <div
                v-for="item in beforeWords"
                :key="item.id"
                @click="changeFollow(item.name)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="followRecode">
          <div class="titleFo">历史跟进记录</div>
          <div class="outSideBox">
            <div
              class="contentFo"
              v-for="item in recordsRop"
              :key="item.id"
              v-show="recordsRop.length > 0"
            >
              <div class="timeBox">
                >{{ timestampToDate(item.createTime) }}
              </div>
              <div class="messageBox">
                {{ item.userNickName }} : {{ item.records }}
              </div>
            </div>
          </div>
          <div class="contentFo" v-show="recordsRop.length == 0">
              <el-empty description="暂无"></el-empty>
          </div>
        </div>
        <!-- <div class="bottomBtns" @click="changeFlag(flagDetailObj.id)">
          <div>
            保存我的重要
          </div>
        </div> -->
      </div>
      <!-- </el-form> -->
    </el-drawer>

    <!-- 导入记录 -->
    <el-dialog
      title="导入记录"
      :visible.sync="isShowuploadRecodes"
      @close="isShowuploadRecodes = false"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-table :data="uploadData" style="width: 100%">
        <el-table-column prop="importUserName" label="导入用户" width="180">
        </el-table-column>
        <el-table-column prop="repeatNum" label="重复条数" width="180">
        </el-table-column>
        <el-table-column prop="importTime" label="导入时间">
          <template slot-scope="scope">
            <span>{{
              scope.row.importTime === null
                ? "-"
                : timestampToDate(scope.row.importTime)
            }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        class="pagination_container"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        :page.sync="pagination.page"
        :limit.sync="pagination.pageSize"
        @pagination="getImportList"
      />
      <div style="width: 100%; text-align: center">
        <el-button
          plain
          class="resetButton"
          @click="isShowuploadRecodes = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    
    <!-- 编辑最新跟进记录 -->
    <el-dialog
      title="编辑最新跟进记录"
      :visible.sync="isShowNewRe"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="true"
      @close="closeisShowNewRe('updateRecode')"
      width="50%">
      <el-form
        ref="updateRecode"
        :inline="false"
        size="small"
        :model="recodeFrom"
        class="demo-form-inline"
        :rules="recodeRuleSum"
        label-position="left"
        label-width="120px">
        <el-form-item label="最新跟进记录" prop="recodeWrods">
          <el-input type="textarea" @input="forceUpdate" v-model="recodeFrom.recodeWrods" clearable></el-input>
          <div class="beforeWords">
            <div v-for="item in beforeWords" :key="item.id" @click="changeIndex(item.name)">
              {{ item.name }}
            </div>
          </div>
        </el-form-item>
      </el-form>
      <el-form class="buttons">
        <el-button
          type="primary"
          class="submitButton"
          @click="addNewRecodes">保存</el-button>
        <el-button
          class="resetButton"
          @click="closeisShowNewRe('updateRecode')">关闭</el-button>
      </el-form>
    </el-dialog>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
      @sort-change="changeTableSort"
      size="mini"
      @select="selectOptions"
      @selection-change="handleSelectionChange"
      style="width: 100%; margin-top: 5px"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="name" label="客户名称" width="90">
        <template slot-scope="scope">
          <span>
            <span v-show="scope.row.isRepeat" class="repeatBtn">重复</span
            >{{ scope.row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="客户手机号" width="120">
      </el-table-column>
      <el-table-column
        prop="quota"
        width="90"
        :show-overflow-tooltip="true"
        label="额度">
        <template slot-scope="scope">
          <span>{{ scope.row.quota === null ? '-' : scope.row.quota }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="isFlag"
        width="100"
        align="center"
        label="标记重要客户"
      >
        <template slot-scope="scope">
          <div style="font-size: 30px" @click="changeFlag(scope.row.id)">
            <i class="el-icon-star-off" v-if="scope.row.isFlag === 0"></i>
            <i class="el-icon-star-on" v-else></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="clientName"
        width="90"
        :show-overflow-tooltip="true"
        label="来源名称"
      >
      </el-table-column>
      <el-table-column
        prop="seasName"
        width="90"
        :show-overflow-tooltip="true"
        label="公海名称"
      >
      </el-table-column>
      <el-table-column
        prop="newRecord"
        width="150"
        :show-overflow-tooltip="true"
        label="最新跟进记录">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="editNewRecord(scope.row)"></i>
          <span @click="editNewRecord(scope.row)">{{ scope.row.newRecord === null ? '-' : scope.row.newRecord }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="newShareTime"
        width="150"
        :show-overflow-tooltip="true"
        label="分配时间">
        <template slot-scope="scope">
          <span>{{ scope.row.newShareTime === null ? '-' : timestampToDate(scope.row.newShareTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="newTime"
        width="150"
        sortable
        :show-overflow-tooltip="true"
        label="跟进时间">
        <template slot-scope="scope">
          <span>{{ scope.row.newTime === null ? '-' : timestampToDate(scope.row.newTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-permissions="'customer:detail'"
            @click="getFlagDetail(scope.row, scope.$index)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-permissions="'customers:delete'"
            @click="deletBtn(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pagination_container"
      :total="paginationForOut.total"
      :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
      :page.sync="paginationForOut.page"
      :limit.sync="paginationForOut.pageSize"
      @pagination="getFlagListFun"
    />
  </div>
</template>

<script>
import {
  roleAdd,
  roleList,
  roleDetail,
  roleUpdate,
  roleDelete,
} from "@/request/role";
import { seasList } from "@/request/seas";
import {
  customersUploadExcel,
  customersAdd,
  customersCusList,
  customersSetFlag,
  customersFollowUpRecord,
  customersUpdateQualificationsByUser,
  customersImportRecord,
} from "@/request/customerList";
import { timestampToDate } from "@/until/paramRou";
import { thirdClientList } from "@/request/thirdClientList";
import { customersBatchDelete, customersDelete } from "@/request/myCus";
import { customersDownloadCus } from "@/request/seas";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      orderBy: '',
      isRepeatArr: [
        {
          name: '不重复',
          id: 0
        },
        {
          name: '重复',
          id: 1
        }
      ],
      noFollowDayArr: [
        {
          name: '3天',
          id: 3
        },
        {
          name: '7天',
          id: 7
        },
        {
          name: '30天',
          id: 30
        }
      ],
      recodeRuleSum: {
        recodeWrods: [
          { required: true, trigger: 'blur', message: '请输入最新跟进记录' }
        ]
      },
      isShowNewRe: false,
      recodeFrom: {
        recodeWrods: ''
      },
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      uploadData: [],
      isShowuploadRecodes: false,
      nowIndex: "",
      beforeWords: [
        {
          name: "不需要",
          id: 1,
        },
        {
          name: "空号",
          id: 2,
        },
        {
          name: "关机",
          id: 3,
        },
        {
          name: "正忙",
          id: 4,
        },
        {
          name: '已加微信',
          id: 5
        },
        {
          name: '拒接',
          id: 6
        }
      ],
      direction: "rtl",
      recordsRop: [],
      activeName: "",
      flagDetailObj: {
        followUpRecord: "",
      },
      flagRule: {
        followUpRecord: [
          { required: true, trigger: "blur", message: "请输入最新跟进记录" },
        ],
        quota: [{ required: true, trigger: "blur", message: "请输入贷款额度" }],
        name: [{ required: true, trigger: "blur", message: "请输入您的昵称" }],
        seasId: [{ required: true, trigger: "change", message: "请选择公海" }],
        status: [
          { required: true, trigger: "change", message: "请选择客户状态" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "请输入您的手机号" },
          {
            validator(_, value, callback) {
              const regTel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if (!regTel.test(value)) {
                callback(new Error("手机号不符合规则"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      flagStatusArr: [
        {
          name: "待跟进",
          id: 0,
        },
        {
          name: "己成交",
          id: 1,
        },
        {
          name: "在考虑",
          id: 2,
        },
        {
          name: "己邀约待上门",
          id: 3,
        },
        {
          name: "己沟通不需要",
          id: 4,
        },
        {
          name: "己上门待签约",
          id: 5,
        },
        {
          name: "己上门资质不服",
          id: 6,
        },
        {
          name: "签约",
          id: 7,
        },
        {
          name: "进件",
          id: 8,
        },
        {
          name: "成交",
          id: 9,
        },
      ],
      showFlagDetailDia: false,
      myCusFromAdd: {
        addType: 1,
        cusName: "",
        level: "",
        phone: "",
        quota: "",
        remarks: "",
        seasId: "",
        status: "",
      },
      addMyCusRule: {
        cusName: [
          { required: true, trigger: "blur", message: "请输入您的名字" },
        ],
        quota: [{ required: true, trigger: "blur", message: "请输入借款额度" }],
        seasId: [{ required: true, trigger: "change", message: "请选择公海" }],
        level: [
          { required: true, trigger: "change", message: "请选择客户星级" },
        ],
        status: [
          { required: true, trigger: "change", message: "请选择客户状态" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "请输入您的手机号" },
          {
            validator(_, value, callback) {
              const regTel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if (!regTel.test(value)) {
                callback(new Error("手机号不符合规则"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      isShowaddMyCus: false,
      permissionRole: [
        {
          name: "仅自己",
          id: 0,
        },
        {
          name: "当前部门",
          id: 1,
        },
        {
          name: "全公司",
          id: 2,
        },
      ],
      paginationForOut: {
        page: 1,
        pageSize: 10,
        total: 20,
      },
      flagCusMolde: {
        kw: "",
        clientId: "",
        seasId: "",
        value_flag: [],
        isRepeat: '',
        noFollowDay: '',
      },
      tableData: [],
      mesFromArr: [],
      salvageArr: [],
      isShowNewRe: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getFlagListFun();
    this.getMesFromList();
  },
  //方法集合
  methods: {
    // 查看导入客户记录
    seeImportUserList(){
      this.getImportList()
    },
    // 时间顺序切换
    changeTableSort(column){
      var sortingType = column.order;
      this.orderBy = sortingType === 'ascending' ? 'c.new_time asc' : sortingType === 'descending' ? 'c.new_time desc' : '';
      this.getFlagListFun();
    },
    // 点击
    changeIndex(val){
      this.recodeFrom.recodeWrods = val
      this.$forceUpdate()
    },
    // 
    closeisShowNewRe(val) {
      this.isShowNewRe = false
    },
    // 编辑最新跟进记录
    editNewRecord(item){
      this.flagDetailObj = item
      this.recodeFrom.recodeWrods = item.newRecord === null ? '' : item.newRecord
      this.isShowNewRe = true
    },
    // 提交最新跟进记录
    addNewRecodes(){
      this.$refs.updateRecode.validate((valid) => {
        if (valid) {
          const objUpdate = {
            addType: 1,
            cusId: this.flagDetailObj.id,
            cusName: this.flagDetailObj.name,
            followUpRecord: this.recodeFrom.recodeWrods,
            level: this.flagDetailObj.level,
            phone: this.flagDetailObj.phone,
            quota: this.flagDetailObj.quota,
            remarks: this.flagDetailObj.remarks,
            seasId: this.flagDetailObj.seasId,
            status: this.flagDetailObj.status
          }
          customersUpdateQualificationsByUser(objUpdate).then(res => {
            this.isShowNewRe = false
            this.getFlagListFun()
            if (res.code === '200') {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          }).catch(err => {
            this.$message({
              message: '服务器忙~',
              type: 'warning'
            })
          })
        }
      })
    },
    getNowNeedFun(val){
      customersFollowUpRecord({ cusId: val })
        .then((res) => {
          if (res.code === "200") {
            this.recordsRop = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    getImportList() {
      let obj = {
        page: this.pagination.page,
        limit: this.pagination.pageSize,
      };
      customersImportRecord(obj).then((res) => {
        this.uploadData = res.data.records;
        this.isShowuploadRecodes = true;
        if (res.code === "200") {
          if (
            res.data.total > 0 &&
            Math.ceil(res.data.total / this.pagination.size) <
              this.pagination.page
          ) {
            this.pagination.page = Math.ceil(
              res.data.total / this.pagination.size
            );
            this.getImportList();
          } else {
            this.pagination.total = res.data.total;
          }
        }
      });
    },

    // 我的客户详情
    getFlagDetail(b, c) {
      this.flagDetailObj = b;
      // console.log(this.flagDetailObj);

      this.nowIndex = c;
      this.viewRecords(b.id);
    },
    // 下一页
    async goNextPage() {
      let changeindex = this.nowIndex + 1;
      let isRight = this.paginationForOut.page - 1;
      let isTo = isRight * this.paginationForOut.pageSize + (changeindex + 1);
      if (isTo <= this.paginationForOut.total) {
        if (changeindex < this.paginationForOut.pageSize) {
          this.getFlagDetail(this.tableData[changeindex], changeindex);
        } else {
          this.paginationForOut.page++;
          await this.getFlagListFun();
          this.nowIndex = 0;
          changeindex = 0;
          this.getFlagDetail(this.tableData[changeindex], changeindex);
          // console.log("more than", this.tableData[changeindex]);
        }
      } else {
        return;
      }
    },
    // 上一页
    async goLastPage() {
      let changeindex = this.nowIndex - 1;
      let isRight = this.paginationForOut.page - 1;
      let isTo = isRight * this.paginationForOut.pageSize + (changeindex + 1);
      if (isTo > 0) {
        if (changeindex >= 0) {
          this.getFlagDetail(this.tableData[changeindex], changeindex);
        } else {
          this.paginationForOut.page--;
          await this.getFlagListFun();
          this.nowIndex = this.paginationForOut.pageSize - 1;
          changeindex = this.paginationForOut.pageSize - 1;
          this.getFlagDetail(this.tableData[changeindex], changeindex);
        }
      } else {
        return;
      }
    },
    forceUpdate() {
      this.$forceUpdate();
    },
    //
    changeFollow(val) {
      this.flagDetailObj.followUpRecord = val;
      this.$forceUpdate();
    },
    // 跟进记录
    commitUserfo() {
      const objUpdate = {
        addType: 1,
        cusId: this.flagDetailObj.id,
        cusName: this.flagDetailObj.name,
        followUpRecord: this.flagDetailObj.followUpRecord,
        level: this.flagDetailObj.level,
        phone: this.flagDetailObj.phone,
        quota: this.flagDetailObj.quota,
        remarks: this.flagDetailObj.remarks,
        seasId: this.flagDetailObj.seasId,
        status: this.flagDetailObj.status,
      };
      customersUpdateQualificationsByUser(objUpdate)
        .then((res) => {
          this.getFlagListFun();
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getNowNeedFun(objUpdate.cusId)
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 删除我的客户
    deletBtn(val) {
      this.$confirm(`是否确认删除’${val.name}‘`, "提示", {
        type: "warning",
        confirmButtonText: "确定",
        showCancelButton: "取消",
        distinguishCancelAndClose: false,
      })
        .then(() => {
          let arr = [];
          arr.push(val.id);
          let deleteCus = {};
          deleteCus.cusIdList = arr;
          customersDelete(deleteCus)
            .then((res) => {
              if (res.code === "200") {
                this.getFlagListFun();
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
                return;
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消!",
          });
        });
    },
    // 批量删除客户
    deleteBtnAll() {
      if (this.salvageArr.length === 0) {
        this.$message({
          type: "error",
          message: "请至少选择一位用户",
        });
      } else {
        this.$confirm(`是否确认删除`, "提示", {
          type: "warning",
          cancelButtonText: "取消",
          showCancelButton: true,
          confirmButtonText: "确定",
          distinguishCancelAndClose: false,
        })
          .then(() => {
            let arr = [];
            for (const element of this.salvageArr) {
              arr.push(element.id);
            }
            let deleteCus = {};
            deleteCus.cusIdList = arr;
            customersBatchDelete(deleteCus)
              .then((res) => {
                if (res.code === "200") {
                  this.getFlagListFun();
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                } else {
                  this.$message({
                    type: "error",
                    message: res.message,
                  });
                  return;
                }
              })
              .catch((err) => {
                this.$message({
                  message: "服务器忙~",
                  type: "warning",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消!",
            });
          });
      }
    },
    // 获取数据来源列表
    getMesFromList() {
      let obj = {
        limit: 99999,
        page: 1,
      };
      thirdClientList(obj)
        .then((res) => {
          if (res.code === "200") {
            this.mesFromArr = res.data.records;
          } else {
            this.mesFromArr = [];
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 下载模板
    downLoadTem() {
      window.location.href = `${this.$downUrl}customersInfo.xlsx`;
    },
    // 下载客户
    downLoadCus() {
      if (this.salvageArr.length === 0) {
        this.$message({
          type: "error",
          message: "请至少选择一位用户",
        });
      } else {
        let arr = [];
        for (const element of this.salvageArr) {
          arr.push(element.id);
        }
        let downloadCus = {};
        downloadCus.cusIdList = arr;
        customersDownloadCus(downloadCus)
          .then((res) => {
            const link = document.createElement("a");
            let blob = new Blob([res], { type: "application/vnd.ms-excel" });
            link.download = "客户信息";
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.$message({
              type: "success",
              message: "下载成功",
            });
          })
          .catch((err) => {
            this.$message({
              message: "服务器忙~",
              type: "warning",
            });
          });
      }
    },
    // 全选按钮
    handleSelectionChange(val) {
      // console.log(val);
      this.salvageArr = val;
    },
    // 单选按钮
    selectOptions(val) {
      // console.log(val);
      this.salvageArr = val;
    },
    // 上传文件
    uploadExcel(item) {
      let params = new FormData();
      params.append("file", item.file);
      customersUploadExcel(params)
        .then((res) => {
          if (res.code === "200") {
            this.getFlagListFun();
            this.$message({
              type: "success",
              message: "上传成功",
            });
            this.getImportList();
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 上传文件失败
    fileUploadError() {
      this.$message({
        type: "error",
        message: "文件上传出现未知错误",
        showClose: true,
      });
    },
    fileUploadSuccess(response, file, fileList) {
      if (response.code === "200") {
        this.$message({
          type: "success",
          message: "上传成功",
          showClose: true,
        });
      } else {
        const msg = response.errorMessage || "文件上传失败";
        this.$message({ type: "error", message: msg, showClose: true });
      }
    },
    // 改变我的客户flag
    changeFlag(val) {
      customersSetFlag({ cusId: val })
        .then((res) => {
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "标记成功",
            });
            this.getFlagListFun();
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 获取我的客户列表
    async getFlagListFun() {
      let flagListObj = {};
      if (this.flagCusMolde.value_flag === null) {
        flagListObj = {
          kw: this.flagCusMolde.kw,
          orderBy: this.orderBy,
          limit: this.paginationForOut.pageSize,
          page: this.paginationForOut.page,
          clientId: this.flagCusMolde.clientId,
          seasId: this.flagCusMolde.seasId,
          noFollowDay: this.flagCusMolde.noFollowDay,
          isRepeat: this.flagCusMolde.isRepeat,
          startTime: "",
          endTime: "",
        };
      } else {
        flagListObj = {
          kw: this.flagCusMolde.kw,
          orderBy: this.orderBy,
          limit: this.paginationForOut.pageSize,
          page: this.paginationForOut.page,
          clientId: this.flagCusMolde.clientId,
          seasId: this.flagCusMolde.seasId,
          noFollowDay: this.flagCusMolde.noFollowDay,
          isRepeat: this.flagCusMolde.isRepeat,
          startTime:
            timestampToDate(this.flagCusMolde.value_flag[0]) === "NaN-aN-aN"
              ? ""
              : timestampToDate(this.flagCusMolde.value_flag[0]),
          endTime:
            timestampToDate(this.flagCusMolde.value_flag[1]) === "NaN-aN-aN"
              ? ""
              : timestampToDate(this.flagCusMolde.value_flag[1]),
        };
      }

      await customersCusList(flagListObj)
        .then((res) => {
          if (res.code === "200") {
            this.tableData = res.data.records;
            if (
              res.data.total > 0 &&
              Math.ceil(res.data.total / this.paginationForOut.size) <
                this.paginationForOut.page
            ) {
              this.paginationForOut.page = Math.ceil(
                res.data.total / this.paginationForOut.size
              );
              this.getFlagListFun();
            } else {
              this.paginationForOut.total = res.data.total;
            }
          } else {
            this.tableData = [];
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 新增我的客户
    addmyCusBtn() {
      this.isShowaddMyCus = true;
    },
    // 提交新我的客户
    submitMycus() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          customersAdd(this.myCusFromAdd)
            .then((res) => {
              if (res.code === "200") {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.isShowaddMyCus = false;
                this.getFlagListFun();
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        }
      });
    },
    // 关闭新增弹框
    closeDia() {
      this.getFlagListFun();
      this.showFlagDetailDia = false;
      this.flagDetailObj.followUpRecord = "";
    },
    // 查看详情跟进记录
    viewRecords(val) {
      customersFollowUpRecord({ cusId: val })
        .then((res) => {
          if (res.code === "200") {
            this.showFlagDetailDia = true;
            this.recordsRop = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 保存修改详情按钮
    addConfigUserRole() {
      const objUpdate = {
        addType: 1,
        cusId: this.flagDetailObj.id,
        cusName: this.flagDetailObj.name,
        followUpRecord: this.flagDetailObj.followUpRecord,
        level: this.flagDetailObj.level,
        phone: this.flagDetailObj.phone,
        quota: this.flagDetailObj.quota,
        remarks: this.flagDetailObj.remarks,
        seasId: this.flagDetailObj.seasId,
        status: this.flagDetailObj.status,
      };
      customersUpdateQualificationsByUser(objUpdate)
        .then((res) => {
          this.showFlagDetailDia = false;
          this.getFlagListFun();
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "操作成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 重置 - 搜索 - 新增
    resetQuery(fromName) {
      // this.resetForm(fromName)
      this.$refs[fromName].resetFields();
      this.flagCusMolde.value_flag = [];
      this.flagCusMolde.seasId = "";
      this.isShowaddMyCus = false;
      this.getFlagListFun();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类

.buttons {
  width: 100%;
  text-align: center;
}
.upload-demo {
  margin-left: 5px;
  display: inline;
}
.filter-container {
  padding: 10px 1%;
  width: 98%;
  min-height: 80vh;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  position: relative;
  .innerBigBox {
    padding: 5px;
    width: 69%;
    height: auto;
    .innerSty {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .outBox {
        width: 85%;
        .templeateBox {
          height: 40px;
          line-height: 40px;
          display: flex;
          .innerPhone {
            width: 30%;
            display: flex;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            div {
              width: 50px !important;
              font-weight: 600;
            }
            .el-icon-phone-outline {
              margin-top: 12px;
            }
          }
          .innerPhone_selet {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 40%;
            margin-left: 10px;
            display: flex;
          }
        }
      }
      .innerBottonGroups {
        width: auto;
        // :nth-child(1) {
        //   margin-bottom: 5px;
        //   background-color: $color-primary;
        // }
        // :nth-child(2) {
        //   background-color: #df8d8d;
        // }
        div {
          border-radius: 5px;
          width: fit-content;
          padding: 3px 10px;
          cursor: pointer;
          color: $color-primary;
        }
      }
    }
    .userRemark {
      width: 100%;
      margin: 10px 0;
      .remarkTitle {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        :nth-child(2) {
          color: $color-primary;
          cursor:pointer;
          padding: 2px 10px;
          border-radius: 5px;
        }
      }
      .beforeWords {
        display: flex;
        div {
          margin: 0 5px;
          color: $color-primary;
          border-bottom: 1px solid $color-primary;
          cursor: pointer;
        }
      }
    }
  }
  .followRecode {

    box-shadow: 1px 0 7px rgba(0, 21, 41, .35);
    padding: 5px;
    width: 29%;
    .titleFo {
      width: 100%;
      font-weight: 600;
    }
    .outSideBox {
      max-height: 60vh;
      overflow-y: scroll;
      .contentFo {
        width: 100%;
        height: auto;
        margin: 10px 0;
        padding: 5px 5px;
        box-shadow: 4px 0 7px rgba(0, 21, 41, .35);
        .timeBox {
        }
        .messageBox {
        }
      }
    }
  }
  .bottomBtns {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    div {
      margin: 0 20px;
    }
  }
}
.el-drawer__header {
  margin-bottom: 0;
}

.beforeWords {
  display: flex;
  div {
    margin: 0 5px;
    border-bottom: 1px solid #000;
    cursor:pointer;
  }
}
</style>
